import React, { useRef } from 'react';
import Row from '@root/components/Row';
import getCssPrefix from '@root/lib/getCssPrefix';
import useGenStyle from './hooks/useGenStyle';
const { cssPrefix } = getCssPrefix();
function BaseContent(props) {
    const { data,width, rowsVisual, rowKey, columns, modifyRowsVisual, align } = props;
    const ref = useRef(null);
    const { contentStyle, defaultRowHeight } = useGenStyle(width);
    return (
        <div className={`${cssPrefix}-base-table-content`} style={contentStyle} ref={ref}>
            {data.map((rowData, index) => {
                let rowVisual = rowsVisual.find(r => { return r[rowKey] === rowData[rowKey] }) || { height: defaultRowHeight };
                return <Row
                    key={rowData[rowKey]}
                    rowIndex={index}
                    rowKey={rowKey}
                    rowData={rowData}
                    columns={columns}
                    height={rowVisual.height || defaultRowHeight}
                    modifyRowsVisual={modifyRowsVisual}
                    rowVisual={rowVisual}
                    align={align}
                />
            })}
        </div>
    )
}
export default BaseContent;
